<!doctype html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Demolab 1 tool</title>
    <meta name="description" content="Three.js fabrication tool.">
    <meta name="author" content="Jason Kadrmas">
    <!-- Mobile viewport optimized: j.mp/bplateviewport -->
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory: mathiasbynens.be/notes/touch-icons -->
    <!-- CSS: implied media=all -->
    <!-- CSS concatenated and minified via ant build script-->
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/colorpicker.css">
    <!-- end CSS-->
    <!-- More ideas for your <head> here: h5bp.com/d/head-Tips -->
    <!-- All JavaScript at the bottom, except for Modernizr / Respond.
    Modernizr enables HTML5 elements & feature detects; Respond is a polyfill for min/max-width CSS3 Media Queries
    For optimal performance, use a custom Modernizr build: www.modernizr.com/download/ -->
    <script src="js/libs/modernizr-2.0.6.min.js"></script>
    <script src="js/libs/jquery-1.7.1.min.js"></script>
    <script src="js/libs/underscore.js"></script>
    <script src="js/libs/backbone.js"></script>
    <script src="js/mylibs/Three.js"></script>
    <script src="myjs/plugins.js"></script>
    <script src="myjs/MyGrid.js"></script>
    <script src="myjs/ManipulatorTool.js"></script>
    <script src="myjs/CanvasTexture.js"></script>
    <script src="myjs/Toolbox.js"></script>
    <script src="myjs/RequestAnimationFrame.js"></script>
    <script src="myjs/Events.js"></script>
    <script type="text/javascript">
        // Ready
        $(document).ready(function () {
            init();
            animate();
            //render();
        });

        var renderer, camera, scene, controls, toolbox;
        function init() {
            //toolbox
            toolbox = new Toolbox();
            // Setup renderer
            renderer = new THREE.WebGLRenderer({ clearAlpha: 1, clearColor: 0x808080 });
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.body.appendChild(renderer.domElement);

            // camera
            this.camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 10000);
            this.camera.position.x = 500;
            this.camera.position.y = 250;
            this.camera.position.z = 500;
            this.camera.lookAt(new THREE.Vector3());

            // trackball
            controls = new THREE.TrackballControls(camera);

            controls.rotateSpeed = 1.0;
            controls.zoomSpeed = 1.2;
            controls.panSpeed = 0.8;

            controls.noZoom = false;
            controls.noPan = false;

            controls.staticMoving = true;
            controls.dynamicDampingFactor = 0.3;

            controls.keys = [65, 83, 68];
            // scene
            scene = new THREE.Scene();
            scene.add(camera);

            // grid
            var myGid = new MyGrid();
            scene.add(myGid);

            // axis
            var myManipulatorTool = new ManipulatorTool();
            scene.add(myManipulatorTool);

            /*
            // material - red color
            var materialRedColor = new THREE.MeshLambertMaterial({ color: 0xff0000 });
            // material - blue color
            var materialBlueColor = new THREE.MeshLambertMaterial({ color: 0x0000ff });

            // plane
            var plane = new THREE.Mesh(new THREE.PlaneGeometry(100, 100), materialBlueColor);
            plane.overdraw = true;
            //plane.rotation.x = Math.PI / 4;
            scene.add(plane);

            // cube
            cube = new THREE.Mesh(new THREE.CubeGeometry(50, 50, 50), materialRedColor);
            cube.overdraw = true;
            //cube.position.set(100, 0, 0);
            scene.add(cube);
            */

            //light
            var light = new THREE.PointLight();
            light.intensity = 1;
            light.castShadow = false;
            light.color = new THREE.Color().setRGB(1, 1, 1);
            light.position.set(100, -150, 500);
            light.rotation.set(0, 0, 0);
            light.scale.set(1, 1, 1);
            scene.add(light);


            // Drag and drop functionality
            $.subscribe(Events.PRIMITIVE_ADDED, addPrimitive);
        }

        function animate() {

            requestAnimationFrame(animate);

            render();
        }

        function render() {

            controls.update();
            renderer.render(scene, camera);

        }

        function addPrimitive(type) {
            var material,
			geometry,
			mesh,
			meshName,
			rotation,
			doubleSided = false;


            material = new THREE.MeshPhongMaterial({ wireframe: false, map: new CanvasTexture(), shading: THREE.SmoothShading, overdraw: false });
            material.name = 'MeshPhongMaterial';

            if (type === "sphere") {
                geometry = new THREE.SphereGeometry(100, 16, 16);
                meshName = 'THREE.SphereGeometry';
            } else if (type === "cube") {
                geometry = new THREE.CubeGeometry(100, 100, 100, 1, 1, 1);
                meshName = 'THREE.CubeGeometry';
            } else if (type === "cylinder") {
                geometry = new THREE.CylinderGeometry(50, 50, 100, 16);
                meshName = 'THREE.CylinderGeometry';
            } else if (type === "cone") {
                geometry = new THREE.CylinderGeometry(0, 50, 100, 16, 1);
                meshName = 'THREE.ConeGeometry';
            } else if (type === "plane") {
                geometry = new THREE.PlaneGeometry(200, 200, 3, 3);
                meshName = 'THREE.PlaneGeometry';
                rotation = new THREE.Vector3(-Math.PI / 2, 0, 0);
                doubleSided = true;
            } else if (type === "torus") {
                geometry = new THREE.TorusGeometry();
                rotation = new THREE.Vector3(-Math.PI / 2, 0, 0);
                meshName = 'THREE.TorusGeometry';
            }

            geometry.dynamic = true;
            mesh = new THREE.Mesh(geometry, material);
            mesh.name = meshName + "." + mesh.id;

            if (rotation) {
                mesh.rotation.copy(rotation);
            }
            if (doubleSided) {
                mesh.doubleSided = true;
            }

            scene.add(mesh);

            //$.publish(Events.VIEWPORT_OBJECT_ADDED, this.scene);

            return mesh;
        }

        function add() {
            // material - red color
            var materialRedColor = new THREE.MeshLambertMaterial({ color: 0xff0000 });
            // material - blue color
            var materialBlueColor = new THREE.MeshLambertMaterial({ color: 0x0000ff });

            // plane
            var plane = new THREE.Mesh(new THREE.PlaneGeometry(100, 100), materialBlueColor);
            plane.overdraw = true;
            //plane.rotation.x = Math.PI / 4;
            scene.add(plane);




            // cube
            cube = new THREE.Mesh(new THREE.CubeGeometry(50, 50, 50), materialRedColor);
            cube.overdraw = true;
            //cube.position.set(100, 0, 0);
            scene.add(cube);
        }
    </script>
</head>
<body>
    <div id="toolbox">
        <div id="logo">
            <input type="button" value="add" id="add" onclick="add();" />
        </div>
        <div class="righttools clearfix">
            <ul class="light-list clearfix">
                <li><a href="#point" class="point" data-placement="below" title="Point"></a></li>
                <li><a href="#spot" class="spot" data-placement="below" title="Spot"></a></li>
                <li><a href="#ambient" class="ambient" data-placement="below" title="Ambient"></a>
                </li>
                <li></li>
            </ul>
            <ul class="toolbox-list clearfix">
                <li><a href="#sphere" class="sphere" title="Sphere"></a></li>
                <li><a href="#cube" class="cube" title="Cube"></a></li>
                <li><a href="#cylinder" class="cylinder" title="Cylinder"></a></li>
                <li><a href="#cone" class="cone" title="Cone"></a></li>
                <li><a href="#plane" class="plane" title="Plane"></a></li>
                <li><a href="#torus" class="torus" title="Torus"></a></li>
            </ul>
            <ul class="export-list">
                <li>
                    <button class="export button">
                        Export</button>
            </ul>
        </div>
    </div>
    <!--
    <div id="gui-transform-container"></div>
    <div id="gui-materials-container">
  	<div></div>
    </div>
    <div class="code-container">
    <button id="hide-button" class="button fr">Hide</button>
    <pre></pre>
    </div>

    <div id="bottom-toolbar" class="clearfix">
    
    <div class="time-buttons">
        <button class="back button"><span></span></button><button id="playButton" class="play button"><span></span></button><button class="forward button"><span></span></button>
    </div>
    <div class="timeline-container"></div>
    <input type="text" id="duration" name="duration" value="1" maxlength="5">&nbsp;sec

    <div class="menu clearfix">
        <ul>
        <li>Object
            <ul>
            <li id="menu-animate" class="clearfix">Animate <span>Space</span></li>
            <li id="menu-delete" class="clearfix">Delete <span>X</span></li>
            </ul>
        </li>
        </ul>
    </div>
    </div>-->
</body>
</html>
